<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="git," />





  <link rel="alternate" href="/atom.xml" title="搁浅丶岁月的变迁" type="application/atom+xml" />






<meta name="description" content="正所谓前人栽树，后人乘凉。 感谢Huxpro提供的博客模板 BY Blog我的的博客  前言从 Jekyll 到 GitHub Pages 中间踩了许多坑，终于把我的个人博客BY Blog搭建出来了。。。 本教程针对的是不懂技术又想搭建个人博客的小白，操作简单暴力且快速。当然懂技术那就更好了。 看看看博客的主页样式：  在手机上的布局：  废话不多说了，开始进入正文。 快速开始从注册一个Gith">
<meta name="keywords" content="git">
<meta property="og:type" content="article">
<meta property="og:title" content="快速搭建个人博客">
<meta property="og:url" content="http://yoursite.com/2017/02/06/2017-02-06-快速搭建个人博客/index.html">
<meta property="og:site_name" content="搁浅丶岁月的变迁">
<meta property="og:description" content="正所谓前人栽树，后人乘凉。 感谢Huxpro提供的博客模板 BY Blog我的的博客  前言从 Jekyll 到 GitHub Pages 中间踩了许多坑，终于把我的个人博客BY Blog搭建出来了。。。 本教程针对的是不懂技术又想搭建个人博客的小白，操作简单暴力且快速。当然懂技术那就更好了。 看看看博客的主页样式：  在手机上的布局：  废话不多说了，开始进入正文。 快速开始从注册一个Gith">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-51a2fe6fbe24d1cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-d58bb45f9faedb70.jpg">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-e65e5cda50f38cef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-1b234fb8549e58aa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-b2347768a1f2d993.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-f47b7e4802de6a34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-ca3d843e526cdd5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-96b5db55df9db422.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-cfd55a22902a9d2c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-c23d4a5d67c88084.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-b37268df7a7852ca.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0c8750f5a18dbe03.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-ec775a22f76e2f40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-904ecb30c536c73b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-19d1b9e7d2624bfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-c36b895c53196fdb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0781006b5d15d149.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-a49ee2975d524c93.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-fb74cdc11a950bd4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-9a47b2074362e570.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-88acd9e29fa3ae8a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-f4d5bb65ae3abd00.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-9281b7176c456f92.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-ef3844cab15e35ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-9a75bba50d1b14d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0968a8dd2045f4fd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0769a93bc487e9d8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-a422f3dab436dfb7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-6e613004fb410b44.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-6022ba3938b3088e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-8f8c27f4e5c72276.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0f2da4717361459c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-adb7d6824e471ef5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-2d7c407ebddbb44f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-93cdccc42024914b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-450ccef6b1ab7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-06b6e6792472ecae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-681a6c455f6b512f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-604f6f23b8fab6f3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-45ddcd27e2f858a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-625be1220fea36b6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-92c1616af56b501a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-bf3580ae1cd9a29e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-c9421d64538c3ba6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-4bfbfec37cbb8eb6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-3c2ee8234a7f1832.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-293bdd4cbee0e9e3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-1347f2cc9a4a8dc8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-768a38ee9fb0df28.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1flgh6k23ppj30ad00uq2t.jpg">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1flghahch1oj30gu09y419.jpg">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-31dc0068f256aca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-9e4785654523bf07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-98965f66db8f5856.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-7399aeaced6f1e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-4be76fb02708de5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-2226239a63278302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-0f8e643fa1da8674.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/2178672-ed45ebafec7f5d34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2018-05-28T08:48:43.919Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="快速搭建个人博客">
<meta name="twitter:description" content="正所谓前人栽树，后人乘凉。 感谢Huxpro提供的博客模板 BY Blog我的的博客  前言从 Jekyll 到 GitHub Pages 中间踩了许多坑，终于把我的个人博客BY Blog搭建出来了。。。 本教程针对的是不懂技术又想搭建个人博客的小白，操作简单暴力且快速。当然懂技术那就更好了。 看看看博客的主页样式：  在手机上的布局：  废话不多说了，开始进入正文。 快速开始从注册一个Gith">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/2178672-51a2fe6fbe24d1cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2017/02/06/2017-02-06-快速搭建个人博客/"/>





  <title>快速搭建个人博客 | 搁浅丶岁月的变迁</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>
    <a href="https://github.com/liaoren512"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">搁浅丶岁月的变迁</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">没有虽败犹荣，只有成王败寇。</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="搜索..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/02/06/2017-02-06-快速搭建个人博客/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="廖壬">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/ichgo.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="搁浅丶岁月的变迁">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">快速搭建个人博客</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-02-06T00:00:00+08:00">
                2017-02-06
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
            </span>
          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<p>正所谓前人栽树，后人乘凉。</p>
<p>感谢<a href="https://github.com/huxpro" target="_blank" rel="noopener">Huxpro</a>提供的博客模板</p>
<p><a href="http://qiubaiying.github.io" target="_blank" rel="noopener"><strong>BY Blog</strong></a><br><a href="http://qiubaiying.top" target="_blank" rel="noopener">我的的博客</a></p>
</blockquote>
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>从 Jekyll 到 GitHub Pages 中间踩了许多坑，终于把我的个人博客<a href="http://qiubaiying.top" target="_blank" rel="noopener">BY Blog</a>搭建出来了。。。</p>
<p>本教程针对的是不懂技术又想搭建个人博客的小白，操作简单暴力且快速。当然懂技术那就更好了。</p>
<p>看看看博客的主页样式：</p>
<p><a href="http://qiubaiying.github.io/" target="_blank" rel="noopener"><img src="http://upload-images.jianshu.io/upload_images/2178672-51a2fe6fbe24d1cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a></p>
<p>在手机上的布局：</p>
<p><a href="http://qiubaiying.github.io/" target="_blank" rel="noopener"><img src="http://upload-images.jianshu.io/upload_images/2178672-d58bb45f9faedb70.jpg" alt=""></a></p>
<p>废话不多说了，开始进入正文。</p>
<h1 id="快速开始"><a href="#快速开始" class="headerlink" title="快速开始"></a>快速开始</h1><h3 id="从注册一个Github账号开始"><a href="#从注册一个Github账号开始" class="headerlink" title="从注册一个Github账号开始"></a>从注册一个Github账号开始</h3><p>我采用的搭建博客的方式是使用 <a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a> + <a href="http://jekyll.com.cn/" target="_blank" rel="noopener">jekyll</a> 的方式。</p>
<p>要使用 GitHub Pages，首先你要注册一个<a href="https://github.com/" target="_blank" rel="noopener">GitHub</a>账号，GitHub 是全球最大的同性交友网站(吐槽下程序员~)，你值得拥有。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-e65e5cda50f38cef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h3 id="拉取我的博客模板"><a href="#拉取我的博客模板" class="headerlink" title="拉取我的博客模板"></a>拉取我的博客模板</h3><p>注册完成后搜索 <code>qiubaiying.github.io</code> 进入<a href="https://github.com/qiubaiying/qiubaiying.github.io" target="_blank" rel="noopener">我的仓库</a></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-1b234fb8549e58aa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>点击右上角的 <strong>Fork</strong> 将我的仓库拉倒你的账号下</p>
<p>稍等一下，点击刷新，你会看到<strong>Fork</strong>了成功的页面</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-b2347768a1f2d993.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h3 id="修改仓库名"><a href="#修改仓库名" class="headerlink" title="修改仓库名"></a>修改仓库名</h3><p>点击<strong>settings</strong>进入设置</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-f47b7e4802de6a34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p></p><p id="Rename"></p><br>修改仓库名为 <code>你的Github账号名.github.io</code>，然后 Rename<p></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-ca3d843e526cdd5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>这时你在在浏览器中输入 <code>你的Github账号名.github.io</code> 例如:<code>baiyingqiu.github.io</code></p>
<p>你将会看到如下界面</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-96b5db55df9db422.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>说明已经成功一半了😀。。。当然，还需要修改博客的配置才能变成你的博客。</p>
<p>若是出现</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-cfd55a22902a9d2c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>则需要 <a href="#Rename">检查一下你的仓库名是否正确</a></p>
<h3 id="整个网站结构"><a href="#整个网站结构" class="headerlink" title="整个网站结构"></a>整个网站结构</h3><p>修改Blog前我们来看看Jekyll 网站的基础结构，当然我们的网站比这个复杂。</p>
<figure class="highlight coq"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">├── _config.yml</span><br><span class="line">├── _drafts</span><br><span class="line">|   <span class="type">├── begin</span>-<span class="built_in">with</span>-the-crazy-ideas.textile</span><br><span class="line">|   <span class="type">└── on</span>-simplicity-<span class="built_in">in</span>-technology.markdown</span><br><span class="line">├── _includes</span><br><span class="line">|   <span class="type">├── footer</span>.html</span><br><span class="line">|   <span class="type">└── header</span>.html</span><br><span class="line">├── _layouts</span><br><span class="line">|   <span class="type">├── default</span>.html</span><br><span class="line">|   <span class="type">└── post</span>.html</span><br><span class="line">├── _posts</span><br><span class="line">|   <span class="type">├── 2007</span><span class="number">-10</span><span class="number">-29</span>-why-every-programmer-should-play-nethack.textile</span><br><span class="line">|   <span class="type">└── 2009</span><span class="number">-04</span><span class="number">-26</span>-barcamp-boston<span class="number">-4</span>-roundup.textile</span><br><span class="line">├── _data</span><br><span class="line">|   <span class="type">└── members</span>.yml</span><br><span class="line">├── _site</span><br><span class="line">├── img</span><br><span class="line">└── index.html</span><br></pre></td></tr></table></figure>
<p>很复杂看不懂是不是，不要紧，你只要记住其中几个OK了</p>
<ul>
<li><code>_config.yml</code> 全局配置文件</li>
<li><code>_posts</code>    放置博客文章的文件夹</li>
<li><code>img</code>    存放图片的文件夹</li>
</ul>
<p>其他的想继续深究可以<a href="http://jekyll.com.cn/docs/structure/" target="_blank" rel="noopener">看这里</a></p>
<h3 id="修改博客配置"><a href="#修改博客配置" class="headerlink" title="修改博客配置"></a>修改博客配置</h3><p>来到你的仓库，找到<code>_config.yml</code>文件,这是网站的全局配置文件。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-c23d4a5d67c88084.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>点击修改</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-b37268df7a7852ca.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>然后编辑<code>_config.yml</code>的内容</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0c8750f5a18dbe03.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>接下来我们来详细说说以下配置文件的内容：</p>
<h4 id="基础设置"><a href="#基础设置" class="headerlink" title="基础设置"></a>基础设置</h4><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"># Site settings</span></span><br><span class="line"><span class="symbol">title:</span> You Blog    				  	<span class="meta">#你博客的标题</span></span><br><span class="line"><span class="symbol">SEOTitle:</span> 你的博客 | You Blog    	 <span class="meta">#显示在浏览器上搜索的时候显示的标题</span></span><br><span class="line">header-img: img/post-bg-rwd.jpg  	<span class="meta">#显示在首页的背景图片</span></span><br><span class="line"><span class="symbol">email:</span> You@gmail.com	</span><br><span class="line"><span class="symbol">description:</span> <span class="string">"You Blog"</span>  			 <span class="meta">#网站介绍</span></span><br><span class="line"><span class="symbol">keyword:</span> <span class="string">"BY, BY Blog, 柏荧的博客, qiubaiying, 邱柏荧, iOS, Apple, iPhone"</span> <span class="meta">#关键词</span></span><br><span class="line"><span class="symbol">url:</span> <span class="string">"https://qiubaiying.github.io"</span>          <span class="meta"># 这个就是填写你的博客地址</span></span><br><span class="line"><span class="symbol">baseurl:</span> <span class="string">""</span>      <span class="meta"># 这个我们不用填写</span></span><br></pre></td></tr></table></figure>
<h4 id="侧边栏"><a href="#侧边栏" class="headerlink" title="侧边栏"></a>侧边栏</h4><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Sidebar settings</span></span><br><span class="line"><span class="attr">sidebar:</span> <span class="literal">true</span>                           <span class="comment"># 是否开启侧边栏.</span></span><br><span class="line"><span class="attr">sidebar-about-description:</span> <span class="string">"说点装逼的话。。。"</span></span><br><span class="line"><span class="attr">sidebar-avatar:</span><span class="string">/img/avatar-by.JPG</span>      <span class="comment"># 你的个人头像 这里你可以改成我在img文件夹中的两张备用照片 img/avatar-m 或 avatar-g</span></span><br></pre></td></tr></table></figure>
<h4 id="社交账号"><a href="#社交账号" class="headerlink" title="社交账号"></a>社交账号</h4><p>展示你的其他社交平台</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-ec775a22f76e2f40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>在下面你的社交账号的用户名就可以了，若没有可不用填</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># SNS settings</span></span><br><span class="line"><span class="attr">RSS:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">weibo_username:</span>     <span class="string">username</span></span><br><span class="line"><span class="attr">zhihu_username:</span>     <span class="string">username</span></span><br><span class="line"><span class="attr">github_username:</span>    <span class="string">username</span></span><br><span class="line"><span class="attr">facebook_username:</span>  <span class="string">username</span></span><br><span class="line"><span class="attr">jianshu_username:</span>	<span class="string">jianshu_id</span></span><br></pre></td></tr></table></figure>
<p>新加入了<strong>简书</strong>，<code>jianshu_id</code> 在你打开你的简书主页后的地址如：<code>http://www.jianshu.com/u/e71990ada2fd</code>中，后面这一串数字：<code>e71990ada2fd</code></p>
<h4 id="评论系统"><a href="#评论系统" class="headerlink" title="评论系统"></a>评论系统</h4><p><del>集成了多说社会化评论，到多说注册账号，然后将<code>duoshuo_username</code>换成你的账号即可。</del></p>
<blockquote>
<p>多说已经关闭：多说于2017年6月1日正式关停服务（惋惜）</p>
</blockquote>
<p><del>我们博客的评论系统切换到 <a href="https://disqus.com/" target="_blank" rel="noopener">Disqus</a>,在官网注册帐号之后，在下面的填写你多说的用户名的就可以使用。</del> 这里的表述不清楚，感谢 <a href="http://www.jianshu.com/u/a13e7484dc21" target="_blank" rel="noopener">@梦幻之云</a> 提供的建议。</p>
<p>博客中使用  <a href="https://disqus.com/" target="_blank" rel="noopener">Disqus</a> 评论系统，在<a href="https://disqus.com/" target="_blank" rel="noopener">官网</a>注册帐号后，按下面的步骤简单的配置即可：</p>
<p>进入 <a href="https://disqus.com/home/settings/profile/" target="_blank" rel="noopener">设置页面</a> 配置个人信息</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-904ecb30c536c73b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="配置 Disqus 个人信息"></p>
<p>找到 <strong>Username</strong></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-19d1b9e7d2624bfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Disqus Account"></p>
<p>这个 <strong>Username</strong>  就是我们 <code>_config.yml</code> 中 <code>disqus_username</code></p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"># Disqus settings（https:<span class="comment">//disqus.com/）</span></span></span><br><span class="line"><span class="symbol">disqus_username:</span> qiubaiying</span><br></pre></td></tr></table></figure>
<h4 id="网站统计"><a href="#网站统计" class="headerlink" title="网站统计"></a>网站统计</h4><p>集成了 <a href="http://tongji.baidu.com/web/welcome/login" target="_blank" rel="noopener">Baidu Analytics</a> 和 <a href="http://www.google.cn/analytics/" target="_blank" rel="noopener">Google Analytics</a>，到各个网站注册拿到track_id替换下面的就可以了</p>
<p>这是我的 Google Analytics</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-c36b895c53196fdb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p><strong>不要使用我的track_id</strong>😂。。。</p>
<p>若不想启用统计，直接删除或注释掉就可以了</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Analytics settings</span></span><br><span class="line"><span class="comment"># Baidu Analytics</span></span><br><span class="line"><span class="attr">ba_track_id:</span> <span class="number">83e259</span><span class="string">f69b37d02a4633a2b7d960139c</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Google Analytics</span></span><br><span class="line"><span class="attr">ga_track_id:</span> <span class="string">'UA-90855596-1'</span>            <span class="comment"># Format: UA-xxxxxx-xx</span></span><br><span class="line"><span class="attr">ga_domain:</span> <span class="string">auto</span></span><br></pre></td></tr></table></figure>
<h4 id="好友"><a href="#好友" class="headerlink" title="好友"></a>好友</h4><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">friends:</span> [</span><br><span class="line">    &#123;</span><br><span class="line"><span class="symbol">        title:</span> <span class="string">"简书·BY"</span>,</span><br><span class="line"><span class="symbol">        href:</span> <span class="string">"http://www.jianshu.com/u/e71990ada2fd"</span></span><br><span class="line">    &#125;,&#123;</span><br><span class="line"><span class="symbol">        title:</span> <span class="string">"Apple"</span>,</span><br><span class="line"><span class="symbol">        href:</span> <span class="string">"https://apple.com"</span></span><br><span class="line">    &#125;,&#123;</span><br><span class="line"><span class="symbol">        title:</span> <span class="string">"Apple Developer"</span>,</span><br><span class="line"><span class="symbol">        href:</span> <span class="string">"https://developer.apple.com/"</span></span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h4 id="保存"><a href="#保存" class="headerlink" title="保存"></a>保存</h4><p>讲网页拉倒底部，点击 <code>Commit changes</code> 提交保存</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0781006b5d15d149.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>再次进入你的主页，</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-a49ee2975d524c93.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>恭喜你，你的个人博客搭建完成了😀。</p>
<h1 id="写文章"><a href="#写文章" class="headerlink" title="写文章"></a>写文章</h1><p>利用 Github网站 ，我们可以不用学习<a href="https://git-scm.com/" target="_blank" rel="noopener">git</a>，就可以轻松管理自己的博客</p>
<p>对于轻车熟路的程序猿来说，使用git管理会更加方便。。。</p>
<h2 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h2><p>文章统一放在网站根目录下的 <code>_posts</code> 的文件夹中。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-fb74cdc11a950bd4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>创建一个文件</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-9a47b2074362e570.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>在下面写文章，和标题，还能实时预览，最后提交保存就能看到自己的新文章了。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-88acd9e29fa3ae8a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h2 id="格式"><a href="#格式" class="headerlink" title="格式"></a>格式</h2><p>每一篇文章文件命名采用的是<code>2017-02-04-Hello-2017.md</code>时间+标题的形式，空格用<code>-</code>替换连接。</p>
<p>文件的格式是 <code>.md</code> 的 <a href="http://sspai.com/25137/" target="_blank" rel="noopener"><strong>MarkDown</strong></a> 文件。</p>
<p>我们的博客文章格式采用是 <strong>MarkDown</strong>+ <strong>YAML</strong> 的方式。</p>
<p><a href="http://www.ruanyifeng.com/blog/2016/07/yaml.html?f=tt" target="_blank" rel="noopener"><strong>YAML</strong></a> 就是我们配置 <code>_config</code>文件用的语言。</p>
<p><a href="http://sspai.com/25137/" target="_blank" rel="noopener"><strong>MarkDown</strong></a> 是一种轻量级的「标记语言」，很简单。<a href="http://sspai.com/25137" target="_blank" rel="noopener">花半个小时看一下</a>就能熟练使用了</p>
<p>大概就是这么一个结构。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">layout:</span>     <span class="string">post</span>   				    <span class="comment"># 使用的布局（不需要改）</span></span><br><span class="line"><span class="attr">title:</span>      <span class="string">My</span> <span class="string">First</span> <span class="string">Post</span> 				<span class="comment"># 标题 </span></span><br><span class="line"><span class="attr">subtitle:</span>   <span class="string">Hello</span> <span class="string">World,</span> <span class="string">Hello</span> <span class="string">Blog</span> <span class="comment">#副标题</span></span><br><span class="line"><span class="attr">date:</span>       <span class="number">2017</span><span class="bullet">-02</span><span class="bullet">-06</span> 				<span class="comment"># 时间</span></span><br><span class="line"><span class="attr">author:</span>     <span class="string">BY</span> 						<span class="comment"># 作者</span></span><br><span class="line"><span class="attr">header-img:</span> <span class="string">img/post-bg-2015.jpg</span> 	<span class="comment">#这篇文章标题背景图片</span></span><br><span class="line"><span class="attr">catalog:</span> <span class="literal">true</span> 						<span class="comment"># 是否归档</span></span><br><span class="line"><span class="attr">tags:</span>								<span class="comment">#标签</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">生活</span></span><br><span class="line"><span class="meta">---</span></span><br><span class="line"></span><br><span class="line"><span class="comment">## Hey</span></span><br><span class="line"><span class="string">&gt;这是我的第一篇博客。</span></span><br><span class="line"></span><br><span class="line"><span class="string">进入你的博客主页，新的文章将会出现在你的主页上.</span></span><br></pre></td></tr></table></figure>
<p>按格式创建文章后，提交保存。进入你的博客主页，新的文章将会出现在你的主页上.</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-f4d5bb65ae3abd00.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>到这里，恭喜你！</p>
<p>你已经成功搭建了自己的个人博客以及学会在博客上撰写文字的技能了（是不是有点小兴奋🙈）。</p>
<h4 id="首页标签"><a href="#首页标签" class="headerlink" title="首页标签"></a>首页标签</h4><p>在首页可以看到这些特色标签，当你的文章出现相同标签（默认相同的<strong>标签数量大于1</strong>），才会自动生成。</p>
<p>所以当你只放一篇文章的时候是不会出现标签的。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-9281b7176c456f92.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>建站的初期，博客比较少，若你想直接在首页生成比较多的标签。你可以在 <code>_congfig.yml</code>中找到这段：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Featured Tags</span></span><br><span class="line"><span class="attr">featured-tags:</span> <span class="literal">true</span>                     <span class="comment"># 是否使用首页标签</span></span><br><span class="line"><span class="attr">featured-condition-size:</span> <span class="number">1</span>              <span class="comment"># 相同标签数量大于这个数，才会出现在首页</span></span><br></pre></td></tr></table></figure>
<p>将其修改为<code>featured-condition-size: 0</code>, 这样只有一个标签时也会出现在首页了。</p>
<p>相反，当你博客比较多，标签也很多时，这时你就需要改回 <code>1</code> 甚至是 <code>2</code> 了。</p>
<h1 id="自定义域名"><a href="#自定义域名" class="headerlink" title="自定义域名"></a>自定义域名</h1><p>搭建好博客之后 你可能不想直接使用 <a href="http://baiyingqiu.github.io" target="_blank" rel="noopener">baiyingqiu.github.io</a> 这么长的博客域名吧, 想换成想 <a href="http://qiubaiying.top" target="_blank" rel="noopener">qiubaiying.top</a> 这样简短的域名。那我们开始吧！</p>
<h4 id="购买域名"><a href="#购买域名" class="headerlink" title="购买域名"></a>购买域名</h4><p>首先，你必须购买一个自己的域名。</p>
<p>我是在<a href="https://wanwang.aliyun.com/domain/?spm=5176.8006371.1007.dnetcndomain.q1ys4x" target="_blank" rel="noopener">阿里云</a>购买的域名</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-ef3844cab15e35ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>用<strong>阿里云</strong> app也可以注册域名，域名的价格根据后缀的不同和域名的长度而分，比如我这个 <code>qiubaiying.top</code> 的域名第一年才只要4元~</p>
<p>域名尽量选择短一点比较好记住，注意，不能选择中文域名，比如 <code>张三.top</code> ,GitHub Pages <strong>无法处理中文域名</strong>，会导致你的域名在你的主页上使用。</p>
<p>注册的步骤就不在介绍了</p>
<h4 id="解析域名"><a href="#解析域名" class="headerlink" title="解析域名"></a>解析域名</h4><p>注册好域名后，需要将域名解析到你的博客上</p>
<p>管理控制台 → 域名与网站（万网） → 域名</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-9a75bba50d1b14d7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>选择你注册好的域名，点击解析</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0968a8dd2045f4fd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>添加解析</p>
<p>分别添加两个<code>A</code> 记录类型,</p>
<p>一个主机记录为 <code>www</code>,代表可以解析 <code>www.qiubaiying.top</code>的域名</p>
<p>另一个为 <code>@</code>, 代表 <code>qiubaiying.top</code></p>
<p>记录值就是我们博客的IP地址，是 GitHub Pagas 在美国的服务器的地址 <code>151.101.100.133</code></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0769a93bc487e9d8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>可以通过 <a href="http://ip.chinaz.com/" target="_blank" rel="noopener">这个网站</a>  或者直接在终端输入<code>ping 你的地址</code>，查看博客的IP</p>
<pre><code>ping qiubaiying.github.io
</code></pre><p>细心地你会发现所有人的博客都解析到 <code>151.101.100.133</code> 这个IP。</p>
<p>然后 GitHub Pages 再通过 CNAME记录 跳转到你的主页上。</p>
<h4 id="修改CNAME"><a href="#修改CNAME" class="headerlink" title="修改CNAME"></a>修改CNAME</h4><p>最后一步，只需要修改 我们github仓库下的 <strong>CNAME</strong> 文件。</p>
<p>选择 <strong>CNAME</strong> 文件</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-a422f3dab436dfb7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>使用的注册的域名进行替换,然后提交保存</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-6e613004fb410b44.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>这时，输入你自己的域名，就可以解析到你的主页了。</p>
<p>大功告成！</p>
<h1 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h1><p>若你对博客模板进行修改，你就要看看 Jekyll 的<a href="http://jekyll.com.cn" target="_blank" rel="noopener">开发文档</a>,是中文文档哦，对英语一般的朋友简直是福利啊（比如说我😀）。</p>
<p>还要学习 <strong>Git</strong> 和 <strong>GitHub</strong> 的工作机制了及使用。</p>
<p>你可以先看看这个<a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/" target="_blank" rel="noopener">git教程</a>，对git有个初步的了解后，那么相信你就能将自己图片传到GitHub仓库上，或者可以说掌握了 <strong>使用git管理自己的GitHub仓库</strong> 的技能呢。</p>
<p>对于轻车熟路的程序猿来说，这篇教程就算就结束了，因为下面的内容对于你们来说 so eazy~</p>
<p>但相信很多小白都一脸懵逼，那我们继续👇。</p>
<h1 id="利用GithHub-Desktop管理GitHub仓库"><a href="#利用GithHub-Desktop管理GitHub仓库" class="headerlink" title="利用GithHub Desktop管理GitHub仓库"></a>利用GithHub Desktop管理GitHub仓库</h1><p><a href="https://desktop.github.com/" target="_blank" rel="noopener">GithHub Desktop</a> 是 <strong>GithHub</strong> 推出的一款管理GitHub仓库的桌面软件，换句话说就是将你在<strong>Github</strong>上的文件同步到本地电脑上，并将修改后的文件同步到<strong>Github</strong>远程仓库。</p>
<h4 id="下载"><a href="#下载" class="headerlink" title="下载"></a>下载</h4><p>点击图片进入下载页面，选择对应的平台进行下载</p>
<p><a href="https://desktop.github.com/" target="_blank" rel="noopener"><img src="http://upload-images.jianshu.io/upload_images/2178672-6022ba3938b3088e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></a></p>
<p>下面以<strong>Mac</strong>平台为例：</p>
<h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><p>将下载好的文件解压，将这只小猫拖到应用程序文件夹中</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-8f8c27f4e5c72276.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>就可以在<strong>Launchpad</strong>找到这只小猫咪~</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0f2da4717361459c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="登录"><a href="#登录" class="headerlink" title="登录"></a>登录</h4><p>点开应用,会弹出<strong>登录</strong>框，</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-adb7d6824e471ef5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>输入你的<strong>GitHub</strong>账号和密码进行登录</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-2d7c407ebddbb44f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>登录后关闭窗口</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-93cdccc42024914b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>然后返回引导窗，一直按 <strong>Continue</strong> 继续</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-450ccef6b1ab7b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p><strong>Continue</strong></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-06b6e6792472ecae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>还是<strong>Continue</strong>~<br><img src="http://upload-images.jianshu.io/upload_images/2178672-681a6c455f6b512f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>进入主界面，先 <strong>右键Remve</strong> 删除这个用户指导，贼烦~</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-604f6f23b8fab6f3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="克隆仓库"><a href="#克隆仓库" class="headerlink" title="克隆仓库"></a>克隆仓库</h4><p>选择你的仓库克隆到本地</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-45ddcd27e2f858a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-625be1220fea36b6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="管理仓库"><a href="#管理仓库" class="headerlink" title="管理仓库"></a>管理仓库</h4><p>现在文件夹中打开</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-92c1616af56b501a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>打开后你会的发现文件结构和你在Github上的一模一样~</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-bf3580ae1cd9a29e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>你最先关心的可能是你的头像~在<strong>img</strong>文件夹中把替换我的头像就好了。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-c9421d64538c3ba6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>不仅是图片，所有在Github上的的操作都可以进行。</p>
<h4 id="保存修改"><a href="#保存修改" class="headerlink" title="保存修改"></a>保存修改</h4><p>当你对仓库文件夹的文件下进行修改、添加或删除时，都可以在 <strong>GitHub Desktop</strong> 中看到</p>
<p>例如我在 <code>img</code> 中添加了一张图片 <code>avatar-demo.png</code> 添加了一张图片</p>
<p>就可以在看到<strong>GitHub Desktop</strong>显示了我的修改</p>
<p>保存修改只要按 <strong>Commit to master</strong>，然后可以写上你的修改说明</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-4bfbfec37cbb8eb6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="同步"><a href="#同步" class="headerlink" title="同步"></a>同步</h4><p>将修改同步到 <strong>GitHub</strong> 远程仓库上只需要一步：点击右上角的<strong>同步按钮</strong></p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-3c2ee8234a7f1832.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="完成"><a href="#完成" class="headerlink" title="完成"></a>完成</h4><p>打开你的GitHub上的仓库，你就可以看到已经和本地同步了</p>
<p>可以看到你提交的详情： <code>add img</code> </p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-293bdd4cbee0e9e3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>这样，你已经能轻松管理自己的博客了。</p>
<p>想上传头像，背景，或者是删掉你不要的图片（我的头像😏）已经是 so eazy了吧~</p>
<h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><p>你在 <strong>GitHub</strong> 网站上进行 <strong>Commit</strong> 操作后，需要在<strong>GitHub Desktop</strong>上按一下 <strong>同步按键</strong> 才能同步网站上的修改到你的本地。</p>
<h1 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h1><p>最近有很多人给我提问题，我这边总结一下</p>
<h4 id="配置文件修改后没有效果"><a href="#配置文件修改后没有效果" class="headerlink" title="配置文件修改后没有效果"></a>配置文件修改后没有效果</h4><p>刷新几遍浏览器就好了~</p>
<p>不行的话，先清除浏览器缓存再试试。</p>
<h4 id="404错误"><a href="#404错误" class="headerlink" title="404错误"></a>404错误</h4><ol>
<li>检查你的仓库名是否有按照要求填写</li>
<li>确定 <strong>Fork</strong> 的是不是我的仓库~</li>
</ol>
<h4 id="修改CNAME文件，域名还是不变"><a href="#修改CNAME文件，域名还是不变" class="headerlink" title="修改CNAME文件，域名还是不变"></a>修改CNAME文件，域名还是不变</h4><p>清除浏览器缓存就OK~</p>
<h4 id="其他问题"><a href="#其他问题" class="headerlink" title="其他问题"></a>其他问题</h4><p>直接在评论中提出来或私信我，我会一一替大家解决的😀</p>
<h1 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h1><p>最近有人往我的远程仓库不停的 <strong>push</strong>，一天连收几十封邮件！例如像这样的</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-1347f2cc9a4a8dc8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>原因大多是直接Clone了我的仓库到本地，<strong>没有删除我的远程仓库地址</strong>，添加完自己的仓库地址后，一口气推送到所有远程仓库（包括我的😂）~</p>
<p>打扰了我的工作和生活~</p>
<p>所以，<strong>请不要往我的仓库上推送分支</strong>！</p>
<p>我发现一个问题是，很多人每次修改博客的内容都commit一次到远程仓库，然后再查看修改结果，这样效率非常低！</p>
<h4 id="来，上车！"><a href="#来，上车！" class="headerlink" title="来，上车！"></a>来，上车！</h4><h2 id="在本地调试博客"><a href="#在本地调试博客" class="headerlink" title="在本地调试博客"></a>在本地调试博客</h2><blockquote>
<p>注：下面的操作是在 <strong>Mac</strong> 终端进行的。<br><strong>Windows</strong> 环境下的配置请参考 <a href="http://www.jianshu.com/u/a13e7484dc21" target="_blank" rel="noopener">@梦幻之云</a> 提供的 <a href="https://agcaiyun.cn/2017/09/10/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" target="_blank" rel="noopener">这篇文章</a>。</p>
</blockquote>
<p>有心的同学在 <a href="http://jekyllcn.com/" target="_blank" rel="noopener">jekyll官网</a> 就会发现 <code>jekyll</code> 的 提供的实例代码。</p>
<figure class="highlight gams"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">~ <span class="symbol">$</span> gem install jekyll bundler</span><br><span class="line">~ <span class="symbol">$</span> jekyll new my-awesome-site</span><br><span class="line">~ <span class="symbol">$</span> cd my-awesome-site</span><br><span class="line">~/my-awesome-site <span class="symbol">$</span> bundle install</span><br><span class="line">~/my-awesome-site <span class="symbol">$</span> bundle exec jekyll serve</span><br><span class="line"># =&gt; 打开浏览器 http:<span class="comment">//localhost:4000</span></span><br></pre></td></tr></table></figure>
<p>这段命令创建了一个默认的 <code>jekll</code> 网站，然后在本机的 4000 窗口展示。聪明的你应该发现怎么做了吧~</p>
<p>安装 <code>jekyll</code>和 <code>jekyll bundler</code></p>
<figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ gem <span class="keyword">install </span><span class="keyword">jekyll</span></span><br><span class="line"><span class="keyword">$ </span>gem <span class="keyword">install </span><span class="keyword">jekyll </span><span class="keyword">bundler</span></span><br></pre></td></tr></table></figure>
<p>进入你的 <strong>Blog 所在目录</strong>，然后创建本地服务器</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> jekyll s</span></span><br></pre></td></tr></table></figure>
<p>然后会显示 </p>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> Auto-<span class="string">regeneration:</span> enabled <span class="keyword">for</span> <span class="string">'/Users/baiying/Blog'</span></span><br><span class="line">Configuration <span class="string">file:</span> <span class="regexp">/Users/</span>baiying<span class="regexp">/Blog/</span>_config.yml</span><br><span class="line">    Server <span class="string">address:</span> <span class="string">http:</span><span class="comment">//127.0.0.1:4000/</span></span><br><span class="line">  Server running... press ctrl-c to stop.</span><br></pre></td></tr></table></figure>
<p>你就可以在 <a href="http://127.0.0.1:4000/" target="_blank" rel="noopener">http://127.0.0.1:4000/</a> 看到你的博客，你对本地博客的修改都会在这个地址进行显示，这大大提高了对博客的配置效率。</p>
<p>使用<code>ctrl+c</code>就可以停止 <strong>serve</strong></p>
<h1 id="Star"><a href="#Star" class="headerlink" title="Star"></a>Star</h1><p>若本教程顺利帮你搭建了自己的个人博客，请不要 <strong>害羞</strong>，给我的 <a href="https://github.com/qiubaiying/qiubaiying.github.io" target="_blank" rel="noopener">github仓库</a> 点个 <strong>star</strong> 吧！</p>
<p>因为最近发现 Fork 将近破百，加上直接 Clone 仓库的，保守估计已经帮助上百人成功的搭建了自己的博客，<del>可是 Star 却仅仅只有 <strong>12</strong>！可能还是做的不够好吧！</del>现在已经破百了，感谢大家的Star！</p>
<h3 id="别无他求，点个-Star-吧！"><a href="#别无他求，点个-Star-吧！" class="headerlink" title="别无他求，点个 Star 吧！"></a><strong>别无他求，点个 <a href="https://github.com/qiubaiying/qiubaiying.github.io" target="_blank" rel="noopener">Star</a> 吧</strong>！</h3><p><img src="http://upload-images.jianshu.io/upload_images/2178672-768a38ee9fb0df28.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p><strong>心满意足！</strong></p>
<h1 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h1><h4 id="修改网站的-icon"><a href="#修改网站的-icon" class="headerlink" title="修改网站的 icon"></a>修改网站的 <strong>icon</strong></h4><p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1flgh6k23ppj30ad00uq2t.jpg" alt=""></p>
<p>要修改如图所示的网站 <strong>icon</strong>：</p>
<p>在博客 <code>img</code> 目录下找到并替换 <code>favicon.ico</code> 这个图标即可，图标尺寸为<code>32x32</code>。</p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1flghahch1oj30gu09y419.jpg" alt=""></p>
<h4 id="修改主页的座右铭"><a href="#修改主页的座右铭" class="headerlink" title="修改主页的座右铭"></a>修改主页的座右铭</h4><p>最近有不少小伙伴私信我：<strong>如何修改主页的座右铭？</strong></p>
<p>就是这个：</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-31dc0068f256aca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>很简单，找到博客目录下的 <strong>index.html</strong> 文件，修改这句话就可以了。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-9e4785654523bf07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h4 id="如何在博客文章中上插入图片"><a href="#如何在博客文章中上插入图片" class="headerlink" title="如何在博客文章中上插入图片"></a>如何在博客文章中上插入图片</h4><p>博客的文章用的是 MarkDown 格式，如果没用过 MarkDown 真的 强烈推荐 <a href="http://sspai.com/25137" target="_blank" rel="noopener">花半个小时学习一下</a>。</p>
<p>MarkDown 中添加图片的形式是 :<code>![](图片的URL)</code></p>
<p>例如：</p>
<p><code>![MarkDown示例图片](http://upload-images.jianshu.io/upload_images/2178672-eb2effd6b942a500.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</code>就会显示下面这张图片</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-98965f66db8f5856.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="MarkDown示例图片"></p>
<p><code>https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg</code>就是这张图片的URL，我们可以在浏览器输入这个URL找到或下载这张图片。</p>
<p>所以，要在 MacDown 中插入图片，这张图片就需要上传到图床（网上），然后在引<br>用这张图片的URL。</p>
<h5 id="将图片上传到图床"><a href="#将图片上传到图床" class="headerlink" title="将图片上传到图床"></a>将图片上传到图床</h5><p>Mac 上的图床神器：iPic  </p>
<p>直接在App Store上下载，谁用谁知道！</p>
<p>使用方法很简单，直接拖动图片到 P 图标上，或者选中图片按快捷键 <code>⌘+U</code>，就能请示上传。</p>
<p>上传成功就能直接粘贴图片的URL。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-7399aeaced6f1e29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="iPic"></p>
<p>用 iPic 上传图片后，获取URL插入文章中就可以了。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-4be76fb02708de5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="iPic上传图片"></p>
<h4 id="推荐几个好用软件"><a href="#推荐几个好用软件" class="headerlink" title="推荐几个好用软件"></a>推荐几个好用软件</h4><h5 id="MarkDown编辑器"><a href="#MarkDown编辑器" class="headerlink" title="MarkDown编辑器"></a>MarkDown编辑器</h5><p><a href="https://macdown.uranusjr.com/" target="_blank" rel="noopener">MacDown</a>：可能是Mac上最好的MacDown编辑器了  </p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-2226239a63278302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<h5 id="图片压缩工具"><a href="#图片压缩工具" class="headerlink" title="图片压缩工具"></a>图片压缩工具</h5><p><a href="https://imageoptim.com/" target="_blank" rel="noopener">ImageOptim</a></p>
<p>对于我们的博客来说，图片越大，加载速度越慢。</p>
<p>不信你用手机打开你的博客试试~</p>
<p>所以有必要对我们上传到博客网站中的图片：指的是你的头像，首页背景图片，文章背景图片等。对于博客文章中插入的图片，其实也可以压缩了再上传。</p>
<p>对博客中的所有图片进行压缩：</p>
<p>看看压缩结果，最高的一张压缩了78.7%，这简直是太可怕了！</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-0f8e643fa1da8674.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="ImageOptim压缩图片"></p>
<p>好了，现在个人博客的加载速度估计要起飞了~</p>
<h1 id="最后要说个事情"><a href="#最后要说个事情" class="headerlink" title="最后要说个事情"></a>最后要说个事情</h1><p>我在博客中的文章，你们可以保留，让更多需要帮助人的看到，当然也可以删除。</p>
<p>但是，我发现居然有人把文章的作者改成了自己，然后当成自己的文章放在自己的博客上，这就令人感到气愤了。</p>
<p>比如说向我请教问题的这位：</p>
<p><img src="http://upload-images.jianshu.io/upload_images/2178672-ed45ebafec7f5d34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p>
<p>我在博客中的每篇文章都是我一字一句敲出来的，转载的文章我也注明了出处，表示对原作者的尊重。同时也希望大家都能尊重我的付出。</p>
<p>谢谢~</p>

      
    </div>
    
    
    

    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <!--<a href="/tags/git/" rel="tag"># git</a>-->
            <a href="/tags/git/" rel="tag"><i class="fa fa-tag"></i> git</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/02/04/2017-02-04-Hello-2017/" rel="next" title="Hello 2017">
                <i class="fa fa-chevron-left"></i> Hello 2017
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/02/06/2017-2-9-Mac快速调出终端/" rel="prev" title="Mac 快速调出终端">
                Mac 快速调出终端 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">分享到：</span>
<a class="jiathis_button_fav">收藏夹</a>
<a class="jiathis_button_copy">复制网址</a>
<a class="jiathis_button_email">邮件</a>
<a class="jiathis_button_weixin">微信</a>
<a class="jiathis_button_qzone">QQ空间</a>
<a class="jiathis_button_tqq">腾讯微博</a>
<a class="jiathis_button_douban">豆瓣</a>
<a class="jiathis_button_share">一键分享</a>

<a href="http://www.jiathis.com/share?uid=2140465" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
  data_track_clickback:true,
  summary:"",
  shortUrl:false,
  hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script>
<!-- JiaThis Button END -->
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/images/ichgo.jpg"
                alt="廖壬" />
            
              <p class="site-author-name" itemprop="name">廖壬</p>
              <p class="site-description motion-element" itemprop="description">Learn to choose, to forsake, to endure loneliness, to resist temptation.</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">391</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">11</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">56</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/liaoren512" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:liaoren512@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/5281757990/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank" title="Weibo">
                      
                        <i class="fa fa-fw fa-globe"></i>Weibo</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com" target="_blank" title="Zhihu">
                      
                        <i class="fa fa-fw fa-globe"></i>Zhihu</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#快速开始"><span class="nav-number">2.</span> <span class="nav-text">快速开始</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#从注册一个Github账号开始"><span class="nav-number">2.0.1.</span> <span class="nav-text">从注册一个Github账号开始</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#拉取我的博客模板"><span class="nav-number">2.0.2.</span> <span class="nav-text">拉取我的博客模板</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#修改仓库名"><span class="nav-number">2.0.3.</span> <span class="nav-text">修改仓库名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#整个网站结构"><span class="nav-number">2.0.4.</span> <span class="nav-text">整个网站结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#修改博客配置"><span class="nav-number">2.0.5.</span> <span class="nav-text">修改博客配置</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#基础设置"><span class="nav-number">2.0.5.1.</span> <span class="nav-text">基础设置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#侧边栏"><span class="nav-number">2.0.5.2.</span> <span class="nav-text">侧边栏</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#社交账号"><span class="nav-number">2.0.5.3.</span> <span class="nav-text">社交账号</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#评论系统"><span class="nav-number">2.0.5.4.</span> <span class="nav-text">评论系统</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#网站统计"><span class="nav-number">2.0.5.5.</span> <span class="nav-text">网站统计</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#好友"><span class="nav-number">2.0.5.6.</span> <span class="nav-text">好友</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#保存"><span class="nav-number">2.0.5.7.</span> <span class="nav-text">保存</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#写文章"><span class="nav-number">3.</span> <span class="nav-text">写文章</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#创建"><span class="nav-number">3.1.</span> <span class="nav-text">创建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#格式"><span class="nav-number">3.2.</span> <span class="nav-text">格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#首页标签"><span class="nav-number">3.2.0.1.</span> <span class="nav-text">首页标签</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#自定义域名"><span class="nav-number">4.</span> <span class="nav-text">自定义域名</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#购买域名"><span class="nav-number">4.0.0.1.</span> <span class="nav-text">购买域名</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#解析域名"><span class="nav-number">4.0.0.2.</span> <span class="nav-text">解析域名</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修改CNAME"><span class="nav-number">4.0.0.3.</span> <span class="nav-text">修改CNAME</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#进阶"><span class="nav-number">5.</span> <span class="nav-text">进阶</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#利用GithHub-Desktop管理GitHub仓库"><span class="nav-number">6.</span> <span class="nav-text">利用GithHub Desktop管理GitHub仓库</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#下载"><span class="nav-number">6.0.0.1.</span> <span class="nav-text">下载</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#安装"><span class="nav-number">6.0.0.2.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#登录"><span class="nav-number">6.0.0.3.</span> <span class="nav-text">登录</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#克隆仓库"><span class="nav-number">6.0.0.4.</span> <span class="nav-text">克隆仓库</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#管理仓库"><span class="nav-number">6.0.0.5.</span> <span class="nav-text">管理仓库</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#保存修改"><span class="nav-number">6.0.0.6.</span> <span class="nav-text">保存修改</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#同步"><span class="nav-number">6.0.0.7.</span> <span class="nav-text">同步</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#完成"><span class="nav-number">6.0.0.8.</span> <span class="nav-text">完成</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#注意"><span class="nav-number">6.0.0.9.</span> <span class="nav-text">注意</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#常见问题"><span class="nav-number">7.</span> <span class="nav-text">常见问题</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#配置文件修改后没有效果"><span class="nav-number">7.0.0.1.</span> <span class="nav-text">配置文件修改后没有效果</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#404错误"><span class="nav-number">7.0.0.2.</span> <span class="nav-text">404错误</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修改CNAME文件，域名还是不变"><span class="nav-number">7.0.0.3.</span> <span class="nav-text">修改CNAME文件，域名还是不变</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#其他问题"><span class="nav-number">7.0.0.4.</span> <span class="nav-text">其他问题</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#其他"><span class="nav-number">8.</span> <span class="nav-text">其他</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#来，上车！"><span class="nav-number">8.0.0.1.</span> <span class="nav-text">来，上车！</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在本地调试博客"><span class="nav-number">8.1.</span> <span class="nav-text">在本地调试博客</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Star"><span class="nav-number">9.</span> <span class="nav-text">Star</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#别无他求，点个-Star-吧！"><span class="nav-number">9.0.1.</span> <span class="nav-text">别无他求，点个 Star 吧！</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#补充"><span class="nav-number">10.</span> <span class="nav-text">补充</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#修改网站的-icon"><span class="nav-number">10.0.0.1.</span> <span class="nav-text">修改网站的 icon</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修改主页的座右铭"><span class="nav-number">10.0.0.2.</span> <span class="nav-text">修改主页的座右铭</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#如何在博客文章中上插入图片"><span class="nav-number">10.0.0.3.</span> <span class="nav-text">如何在博客文章中上插入图片</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#将图片上传到图床"><span class="nav-number">10.0.0.3.1.</span> <span class="nav-text">将图片上传到图床</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#推荐几个好用软件"><span class="nav-number">10.0.0.4.</span> <span class="nav-text">推荐几个好用软件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#MarkDown编辑器"><span class="nav-number">10.0.0.4.1.</span> <span class="nav-text">MarkDown编辑器</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#图片压缩工具"><span class="nav-number">10.0.0.4.2.</span> <span class="nav-text">图片压缩工具</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#最后要说个事情"><span class="nav-number">11.</span> <span class="nav-text">最后要说个事情</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        
<!--<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>-->

<div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">廖壬</span>

  
</div>

<!-- 在网站底部加上访问量-->
<!--<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_pv"></span>
</span>
</div>-->
<!--pv的方式，单个用户连续点击n篇文章，记录n次访问量-->
<!--

  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>



-->
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共字</span>
</div>
        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  



  
  









  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/three.min.js"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/three-waves.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  
  

  

  

  

</body>
</html>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>